<template>
    <div>
        <!-- 文章分类列表 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix header-box">
                <span>文章分类</span>
                <el-button type="primary" size="mini"   @click="addCateBtnFn">添加文章分类</el-button>
            </div>
            <!-- 文章分类表格 -->
            <el-table style="width: 100%" border stripe :data="cateList">
                <el-table-column label="序号" width="100" type="index"></el-table-column>
                <el-table-column label="分类名称" prop="cate_name"></el-table-column>
                <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" size="mini" @click="updateFn(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeFn(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加文章分类对话框 -->
        <!-- --.sync作用实现双向数据绑定，会在运行时给所在标签绑定@update:属性名的事件
        把接收到子组件内传来的值赋予给右侧vue变量
        $emit('update:visible',true)
        update是固定的 -->
        <el-dialog :title="isEdit ? '编辑文章分类' : '添加文章分类'" :visible.sync="addVisible"  @closed="onAddClosedFn" width="30%" >
            <!-- 添加的表单 -->
            <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px">
                <el-form-item label="分类名称" prop="cate_name">
                    <el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="分类别名" prop="cate_alias">
                    <el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelFn">取 消</el-button>
                <el-button type="primary" @click="addFn">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

    //如果用同一个按钮，想要做状态区分
    //1.定义一个标记变量isEdit(true编辑，false新增),还要定义本次编的唯一id值，editId
    //2.再点击修改时，idEdit改为true，editId保存要修改的数据id
    //3.再点击新增按钮时，isEdit改为false,editId置空
    //4.再点击保存按钮时，就可以利用isEdit变量区分
    import {getArtCateListAPI,addArtCateAPI,updateArtCateAPI,delArtCateAPI} from '@/api'
export default {
    name:'artCate',
    data() {
        return {
            editId:'',//修改的文章id
            isEdit:false,//保存编辑状态（）
            cateList:[],
            addVisible:false,  //设置弹框不默认出现
            addForm:{
                cate_name:'',
                cate_alias:''
            },
            addRules:{ // 添加表单的验证规则对象
                cate_name: [
                { required: true, message: '请输入分类名称', trigger: 'blur' },
                { pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }
                ],
                cate_alias: [
                { required: true, message: '请输入分类别名', trigger: 'blur' },
                { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.initCateListFn()
    },
    methods:{
        //获取-文章分类列表
      async  initCateListFn(){
            const {data:res} = await getArtCateListAPI()
            this.cateList = res.data
           
        },
        //对话框->取消回调
        cancelFn(){
            this.addVisible = false
        },
        //对话框->点击事件-保存文章分类接口
       async addFn(){
            //进行兜底校验
            this.$refs.addRef.validate(async valid=>{
                if(valid){
                   if(this.isEdit){
                        //方法一：this.addForm.id = this.editId 给addForm添加一个id
                        const {data:res} = await updateArtCateAPI({id:this.editId,...this.addForm})
                        console.log(res);
                       if(res.code !==0) return this.$message.error('更新失败')
                       this.$message.success('更新成功')
                   }else{
                    const { data: res } = await addArtCateAPI(this.addForm)

                    if (res.code !== 0) return this.$message.error('添加分类失败！')
                    this.$message.success('添加分类成功！')
                   }
                            // 重新请求列表数据
                    this.initCateListFn()
                    // 关闭对话框
                    this.addVisible = false
                  
                }else{
                    return false
                }
            })
        },
        //对话框-关闭时的回调
        onAddClosedFn(){
            this.$refs.addRef.resetFields() 
        },
        //点击弹出对话框
        addCateBtnFn(){
            this.addVisible = true,
            this.editId = '',
            this.isEdit = false
        },
        //点击修改进入弹框修改数据,先做数据回显
        updateFn(obj) {
            console.log(obj);
            this.editId = obj.id // 保存要编辑的文章分类ID
            this.isEdit = true // 设置编辑状态
            this.addVisible = true // 让对话框显示
            // 设置数据回显
            //Dialoog的内容是懒渲染，第一次被打开之前，传入的默认slot不会被渲染到DOM上，
            //第二次作CSS的隐藏和显示
            //第一次打开网页，点击修改，虽然dialog变量为true但是同步代码把addFrom中的对象
            //赋了值，DOM更新异步，dialog出现，el-from组件第一次挂在（使用addFROM内置作回显然后显示初始值）
            //此时是一个同步过程，为了让真实DOM先出现，绑定空的初始值，在进行回显
            this.$nextTick(() => {
            // 先让对话框出现, 它绑定空值的对象, 才能resetFields清空用初始空值
            this.addForm.cate_name = obj.cate_name
            this.addForm.cate_alias = obj.cate_alias
            })
        },
        // 删除-文章分类
        async removeFn (obj) {
            // console.log(this.$route);
            const { data: res } = await delArtCateAPI(obj.id)
            console.log(res);
            if (res.code !== 0) return this.$message.error('删除分类失败！')
            this.$message.success('删除分类成功！')
            // 重新请求列表数据
            this.initCateListFn()
        }
    }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>